<template>
    <div class="container">
        <div v-if="isLogin" class="formContainer">
            <div class="title">登录</div>
            <a-form :model="loginForm" @finish="handleLogin" v-bind="formProps" :rules="loginRules">
                <a-form-item label="账号" name="userName">
                    <a-input v-model:value="loginForm.userName" placeholder="请输入账号"></a-input>
                </a-form-item>
                <a-form-item label="密码" name="password">
                    <a-input type="password" v-model:value="loginForm.password" placeholder="请输入密码"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" html-type="submit">登录</a-button>
                    <a-button type="link" @click="isLogin = false">注册</a-button>
                </a-form-item>
            </a-form>
        </div>

        <div v-else class="formContainer">
            <div class="title">注册</div>
            <a-form :model="registerForm" @finish="handleRegister" v-bind="formProps" :rules="signupRules">
                <a-form-item label="用户名" name="userName">
                    <a-input v-model:value="registerForm.userName" placeholder="请输用户名"></a-input>
                </a-form-item>
                <a-form-item label="性别" name="sex">
                    <a-select v-model:value="registerForm.sex"
                             placeholder="请选择性别">
                        <a-select-option key="1">男</a-select-option>
                        <a-select-option key="0">女</a-select-option>
                        <a-select-option key="2">外星人</a-select-option>
                        <a-select-option key="3">其他</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="身高" name="height">
                    <a-input v-model:value="registerForm.height" placeholder="请输入身高" suffix="cm"></a-input>
                </a-form-item>
                <a-form-item label="体重" name="weight">
                    <a-input v-model:value="registerForm.weight" placeholder="请输入体重" suffix="kg"></a-input>
                </a-form-item>
                <a-form-item label="电话号码" name="phone">
                    <a-input v-model:value="registerForm.phone" placeholder="请输入电话号码"></a-input>
                </a-form-item>
                <a-form-item label="密码" name="password">
                    <a-input type="password" v-model:value="registerForm.password" placeholder="请输入密码"></a-input>
                </a-form-item>
                <a-form-item label="确认密码" name="confirmPassword">
                    <a-input type="password" v-model:value="registerForm.confirmPassword"
                             placeholder="请确认密码"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" html-type="submit">注册</a-button>
                    <a-button type="link" @click="isLogin = true">已有账号?去登录</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
import {login, register} from '../service.js';
import {message} from "ant-design-vue";

export default {
    data() {
        return {
            formProps: {
                colon: false,
                labelCol: {span: 4, offset: 0},
                autocomplete: "off",
                hideRequiredMark: true,
            },
            isLogin: true,
            loginForm: {
            },
            registerForm: {
            },
        };
    },
    computed: {
        baseRule() {
            return {
                userName: [
                    {required: true},
                ],
                password: [
                    {required: true},
                ],
            }
        },
        signupRules() {
            return {
                ...this.baseRule,
                confirmPassword: [
                    {
                        required: true,
                    },
                    {
                        validator: (r, value) => {
                            if (value !== this.registerForm.password) {
                                return Promise.reject('密码不一致');
                            }
                            return Promise.resolve();
                        }
                    }
                ],
            }
        },
        loginRules() {
            return {
                ...this.baseRule,
            }
        }
    },
    methods: {
        async handleLogin() {
            // 处理登录逻辑
            console.log('login', this.loginForm);
            const res = await login(this.loginForm);
            message.success('登录成功');
            this.$router.push({
                name: 'faq'
            });
            localStorage.setItem('token', res.token);
            localStorage.setItem('userInfo', JSON.stringify(res.user));
        },

        async handleRegister() {
            // 处理注册逻辑
            console.log('register', this.registerForm);
            const res = await register(this.registerForm);
            this.isLogin = true;
            message.success('注册成功');
        },
    },
};
</script>

<style scoped lang="less">
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.formContainer {
    width: 500px;
    padding: 24px 48px;
    border-radius: 4px;
    transition: all .3s;
    border: 1px solid #efefef;

    &:hover {
        border-color: transparent;
        box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.15);
    }
}

.title {
    margin-bottom: 40px;
    font-size: 24px;
}
</style>
